<template>
  <div>
    <div class="control-strategy-page">
      <!-- aside 
            v-if="permission.add"
            v-if="permission.modify"
            v-if="permission.delete"-->

      <!-- content v-if="permission.add_operation"     v-if="permission.delete_operation"-->
      <div class="content container">
        <div class="head-section">
          <h3 class="table-head">所属网点：</h3>
          <el-select v-model="organId" @change="organChangeEvent" placeholder="请选择所属网点">
            <el-option v-for="item in organOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>

          </el-select>
          <h3 class="table-head" style="margin-left:10px">所属区域：</h3>
          <el-select v-model="areaid" filterable  placeholder="请选择所属区域"  multiple
    collapse-tags>
            <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>

          </el-select>
          <div class="head">
            <div class="select-data-range">
              <el-select v-model="dateRangeValue" @change="select_day_week_month">
                <el-option label="按天" value="day"></el-option>
                <el-option label="按周" value="week"></el-option>
                <el-option label="按月" value="month"></el-option>
              </el-select>
            </div>
            <div class="time-input-box">
              <!-- <el-date-picker v-model="timeInputValue" type="date" placeholder="请选择日期" :clearable="false" format="yyyy-MM-dd" size="small"> </el-date-picker> -->
              <el-date-picker v-model="dateValue" placeholder="选择日期" @blur="dateValueBlur" :clearable="false">
              </el-date-picker>
            </div>
            <!-- 前一个按钮 -->
            <div class="pre-button">
              <img src="../../assets/icons/pre-arrow.png" @click="switchOneData(0)" />
            </div>
            <!-- 时间选择框 -->
            <div class="time-select-box">
              <el-date-picker v-model="startTimeValue" type="datetime" placeholder="开始时间" :clearable="false"
                format="yyyy-MM-dd">
              </el-date-picker>
              <span> ~ </span>
              <el-date-picker v-model="endTimeValue" type="datetime" placeholder="结束时间" :clearable="false"
                format="yyyy-MM-dd">
              </el-date-picker>
            </div>
            <!-- 下一个 -->
            <div class="next-button">
              <img src="../../assets/icons/next-arrow.png" @click="switchOneData(1)" />
            </div>
            <div class="search-btn-box">
              <el-button size="medium" @click="startQuery">
                <img class="search-icon" src="../../assets/icons/magnifier.png" alt="" />
                <span class="search-txt">查询</span>
              </el-button>
            </div>
            <div class="select-data-range" styel="">
              <el-select v-model="abnormal" @change="select_abnormal">
                <el-option label="全部" :value="0"></el-option>
                <el-option label="异常开启" :value="1"></el-option>

              </el-select>
            </div>
            <el-button type="primary" @click="setworktime()" icon="el-icon-time" style="margin-left:10px">设置上班时间</el-button>
            <!-- <el-tooltip placement="bottom-end">
              <div slot="content">
                <div v-for="item in worktime" :key="item.id">
                  <div>{{item.startTime}}~{{item.endTime}}</div>
                </div>
              </div>
              <el-button style="margin-left:10px">工作时间</el-button>
            </el-tooltip> -->
          </div>
        </div>
        <div class="table-section">

          <el-table  :row-class-name="tableClassName" ref="refAreaAppliancesTable" height="7.3rem" :data="tableData" border>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="probeName" label="设备名称" style="cursor: pointer" >
            </el-table-column>
            <el-table-column prop="channelName" label="通道名称" style="cursor: pointer" >
            </el-table-column>
            <el-table-column prop="areaName" label="所属区域" style="cursor: pointer" >
            </el-table-column>
            <el-table-column prop="probeGuid" label="设备Guid" style="cursor: pointer" width="150">
            </el-table-column>
            <el-table-column prop="channelId" label="通道ID" style="cursor: pointer" width="150">
            </el-table-column>
            <el-table-column prop="ss" label="动作" style="cursor: pointer">
              <template slot-scope="scope">
                <span>{{scope.row.ss==1?'开启':'关闭'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="st" label="温度(℃)" style="cursor: pointer">
            </el-table-column>

            <el-table-column prop="sq" label="用电量(度)" style="cursor: pointer">
              <template slot-scope="scope">
                <span>{{((scope.row.sq) / 1000).toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="abnormal" label="非工作时段开启" style="cursor: pointer">
              <template slot-scope="scope">
                <span>{{scope.row.abnormal==1?'是':'否'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="数据上报时间" style="cursor: pointer">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currentPage"
            :page-sizes="[14, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" style="text-align: right">
          </el-pagination>
        </div>
      </div>

    </div>
    <el-dialog class="edit-probe-dia" title="设置上班时间" :visible.sync="dialogwroktimeVisible" width="550px"
      @close="resetForm" :close-on-click-modal="false">
      <div class="SetTime-row">
        <!-- <div class="SetTime-title">工作时段</div> -->
        <div v-if="OpenTimeArr != ''">
          <div class="SetTime-boxmian" v-for="(item, index) in OpenTimeArr" :key="index">
            <div>
              <el-checkbox-group v-model="item.dayType">
                <el-checkbox v-for="item in Defaultoptionslist" :key="item.dayType" :label="item.dayType">
                  {{ item.dayName }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="SetTime-box">
              <el-time-picker v-model="item.startTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择开始日期时间">
              </el-time-picker>

              <span>~</span>
              <el-time-picker v-model="item.endTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择结束日期时间"
                :picker-options="{
                  selectableRange: `${item.startTime ? item.startTime + ':00' : '00:00:00'
                    }-23:59:59`,
                }">
              </el-time-picker>

              <span class="el-icon-remove-outline" @click="deleteItem('Optime', index)"></span>
            </div>

          </div>
        </div>
        <div class="SetTime-addBtn">
          <span style="color:#fff" class="el-icon-circle-plus-outline" @click="addNew('Optime')"></span>
        </div>
        <div class="SetTimeSubmitBtn">
          <el-button type="primary" @click="SetTimeSubmitBtn">
            提交
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui.js";
import date from "@/utils/date";
import axios from "axios";
export default {
  data() {
    return {
      userid: "",
      organId: null,
      permission: {
        add: false,
        modify: false,
        delete: false,
        add_operation: false,
        delete_operation: false,
      },
      tableIndex: 0,
      // 操作table

      tableData: [],
      AlltableData: [],
      filtAlltableData: [],
      currentPage: 1,
      pageSize: 14,
      total: 0,
      //网点列表
      organOptions: [],
      dateRangeValue: 'day',
      startTimeValue: '',
      endTimeValue: '',
      dateValue: '',
      abnormal:0,
      worktime:[],
      areaOptions:[],
      areaid:[],
      dialogwroktimeVisible:false,
      OpenTimeArr:[]
    };
  },
  created() {
    this.userid = this.$store.getters.user.id;
    this.getOrganListData();
    this.dateValue = new Date()
    this.dateValueBlur({ value: this.dateValue })
    this.startTimeValue = date.formatTime(new Date(), '-')
    this.endTimeValue = date.formatTime(new Date(), '-')
    this.getCustomerAvailableData()
  },
  mounted() {
    this.$store.dispatch("actions/dynamicTitleAction", this.$route.meta.title);
  },
  methods: {
    resetForm() {
      this.dialogProbeVisible = false;
    },
//获取日期类型
getCustomerAvailableData() {
      ajax.get({
        url: this.$API.getCustomerAvailableList,
        success: (response) => {

          if (response.success) {
            this.$nextTick(() => {
              this.Defaultoptionslist = response.data
            })
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 设置可操作的权限
    setPermission() {
      let role_permissions = this.$store.getters.rolePermissions;
      console.log("-----------------------", role_permissions);
      for (let item of role_permissions) {
        if (item.action === "/web/strategy") {
          for (let permission of item.privilegeList) {
            switch (permission.action) {
              case "/web/strategy/add":
                this.permission.add = true;
                break;
              case "/web/strategy/modify":
                this.permission.modify = true;
                break;
              case "/web/strategy/delete":
                this.permission.delete = true;
                break;
              case "/web/strategy/add_operation":
                this.permission.add_operation = true;
                break;
              case "/web/strategy/delete_operation":
                this.permission.delete_operation = true;
                break;
              default:
                break;
            }
          }
        }
      }
    },
    // 获取网点列表
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan + this.userid,
        success: (response) => {
          //console.log(response)
          const resp = response.data;
          if (resp.length > 0) {
            this.organOptions = resp;
            this.organId = resp[0].id
            //this.getworktime()
            this.getAreaListData();
          } else {
            this.organOptions = [];
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    //切换网点
    organChangeEvent() {
      this.getAreaListData()
      //this.getworktime()
    },
     // 获取区域列表
     getAreaListData() {
      ajax.get({
        url: this.$API.getAreaByOrganId + this.organId,
        success: (response) => {
          //console.log(response)
          const resp = response.data;
          if (resp.length > 0) {
            this.areaid=[]
            this.areaOptions = resp;
            this.areaid.push(resp[0].id) 
            //this.getworktime()
            this.getStrategyOperationData();
          } else {
            this.areaOptions = [];
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 网点下的控制策略
    getStrategyOperationData() {
      let po_id = this.organId;
      let startTime = this.startTimeValue.slice(0, 10) + ' ' + '00:00:00'
      let endTime = this.endTimeValue.slice(0, 10) + ' ' + '23:59:59'
      ajax.post({
        url: this.$API.getProbeReportDataByAreaId,
        data: {
          endTime: endTime,
          startTime: startTime,
          timeRange: this.dateRangeValue,
          ids:this.areaid
        },
        success: (response) => {

          this.AlltableData = response.data;
          this.filtAlltableData =response.data;
         
          this.initTableData();
        },
      });
    },



    // table每行加上index
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    initTableData() {
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      let start = (currentPage - 1) * pageSize;
      let end = start + pageSize;
      this.total = this.AlltableData.length;
      // //console.log(this.tableDataAll)
      this.tableData = this.AlltableData.slice(start, end);
      // //console.log(this.tableData)
    },
    //
    handleSizeChange(value) {
      this.pageSize = value;
      this.initTableData();
    },
    handlePageChange(value) {
      this.currentPage = value;
      this.initTableData();
    },
    select_abnormal(){
      let data =[...this.filtAlltableData]
      this.currentPage = 1
      if(this.abnormal == 1){
        this.AlltableData = data.filter(item=>item.abnormal ==1)
      }else{
        this.AlltableData = data
      }
      this.initTableData()
    },

    // 切换按天按周按月
    select_day_week_month: function (optionValue) {

      let self = this
      switch (optionValue) {
        case 'day':

          self.dateRangeValue = 'day'

          self.dateValueBlur({ value: self.dateValue })
          break
        case 'week':
          // console.log('按周')
          self.dateRangeValue = 'week'

          self.dateValueBlur({ value: self.dateValue })
          break
        case 'month':
          // console.log('按月')
          self.dateRangeValue = 'month'

          self.dateValueBlur({ value: self.dateValue })
          break
        default:
          break
      }
    },
    // getworktime() {
    //   let self = this
     
    //     ajax.get({
    //       url: this.$API.getOrganWorkingTime + self.organId,
    //       success: (response) => {
    //         if (response.data.length > 0) {
    //           this.worktime=response.data
    //         }
    //         else{
    //           this.worktime=[]
    //         }
    //         // console.log(response)  
    //       },
    //     })

     

    // },
    // 时间选择框失去焦点事件
    dateValueBlur: function (e) {
      //console.log(e.value)
      let self = this
      let newValue = e.value
      //console.log(newValue)
      let valueDate = new Date(newValue)
      switch (self.dateRangeValue) {
        case 'day':
          //console.log('按天')
          var formatRes = date.formatTime(valueDate, '/')
          //console.log(formatRes)
          self.startTimeValue = formatRes
          self.endTimeValue = formatRes
          break
        case 'week':
          //console.log('按周')
          var week = valueDate.getDay()
          var diff = week ? week - 1 : 6
          valueDate.setDate(valueDate.getDate() - diff)
          self.startTimeValue = date.formatTime(valueDate, '/')
          valueDate.setDate(valueDate.getDate() + 6)
          self.endTimeValue = date.formatTime(valueDate, '/')
          break
        case 'month':
          //console.log('按月')
          var YearMonth = date.formatYearMonth(valueDate, '/')
          self.startTimeValue = YearMonth + '-' + '01'
          var endDate = new Date(
            valueDate.getFullYear(),
            valueDate.getMonth() + 1,
            0
          )
          self.endTimeValue = date.formatDate(endDate, '/')
          break
        default:
          break
      }
    },
    //设置上班时间  
    setworktime() {
      let self = this
      this.dialogwroktimeVisible = true
  
      this.OpenTimeArr = []
     
        ajax.get({
          url: this.$API.getOrganWorkingTime + self.organId,
          success: (response) => {
            if (response.data.length > 0) {
              for (let item of response.data) {
                let OpenTimeattr = {}
                OpenTimeattr.startTime = item.startTime
                OpenTimeattr.endTime = item.endTime
                OpenTimeattr.dayType =item.dayTypeList
                OpenTimeattr.dayTypeList =item.dayTypeList
                self.OpenTimeArr.push(OpenTimeattr)

              }
            }
            else {
              self.OpenTimeArr = [
                { endTime: "", startTime: "", dayType: [] },
                { endTime: "", startTime: "", dayType: [] },
              ]
            }
            // console.log(response)  
          },
        })

     

    },
    //提交
    SetTimeSubmitBtn() {
      let self = this;
      let regex = /^(([0-2][0-3])|([0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/; //正则表达式格式xx:xx 第一位为最大值为00-23 第二位00 - 59
      let po_OpenTimeArr = [];
      let po_LockTimeArr = [];
      let SetTimearr = []
      if (this.OpenTimeArr.length == 0) {
        self.$message({
          message: "未填写时间",
          type: "warning",
        });
        return;
      }
      for (let i of this.OpenTimeArr) {
        if (i.startTime == "" || i.endTime == "") {
          self.$message({
            message: "开始或结束时间不能为空",
            type: "warning",
          });
          return;
        } else if (!regex.test(i.startTime) || !regex.test(i.endTime)) {
          self.$message({
            message: "时间错误",
            type: "warning",
          });
          return;
        }
        else if (i.dayType.length == 0) {
          self.$message({
            message: "类型不能为空  ",
            type: "warning",
          });
          return;
        }
        else {
          let SetTimeattr = {}
          SetTimeattr.startTime = i.startTime
          SetTimeattr.endTime = i.endTime
          SetTimeattr.dayType = "," + i.dayType.join(',') + ","
          SetTimearr.push(SetTimeattr)
        }
      }
        self.postsaveOrganworkingtime(SetTimearr)

    },
    postsaveOrganworkingtime(SetTimearr) {
      let self = this
      ajax.post({
        url: this.$API.addOrganWorkingTime + self.organId,
        data: { id: self.settimeid, type: self.settimetype, data: JSON.stringify(SetTimearr) },
        success: (response) => {
          this.$message({
            type: "success",
            message: response.message,
          });

        },
      })
    },
    addNew(timeType) {
      let self = this;
      switch (timeType) {
        case "Optime":
          self.OpenTimeArr.push({ startTime: "", endTime: "", dayType: [] });
          break;
        case "Lctime":
          self.LockTimeArr.push({ startTime: "", endTime: "" });
          break;
        // case 'valley':
        // 	self.valleyArr.push({ startTime: '', endTime: '' })
        // break
      }
    },
    deleteItem(timeType, itemIndex) {
      switch (timeType) {
        case "Optime":
          this.OpenTimeArr.splice(itemIndex, 1);
          break;
        case "Lctime":
          this.LockTimeArr.splice(itemIndex, 1);
          break;
      }
    },
    tableClassName({row, rowIndex}) {
                if (row.abnormal == 1) {
                return 'warning-row';
                }
                return '';
            },
    // 查询事件
    startQuery: function () {
      // this.value1=[]
      this.getStrategyOperationData()

    },
    // 切换上一个下一个
    switchOneData: function (switchType) {
      // console.log(switchType)
      let self = this
      switch (self.dateRangeValue) {
        case 'day': //按天
          //console.log(self.startTimeValue)
          var currentDate = new Date(self.startTimeValue)
          if (switchType === 0) {
            //0：上一个

            currentDate.setDate(currentDate.getDate() - 1)
          } else {
            //下一个
            currentDate.setDate(currentDate.getDate() + 1)
          }
          var formatres = date.formatTime(currentDate, '/')
          self.startTimeValue = formatres
          self.endTimeValue = formatres

          break
        case 'week': //按周
          var currentWeekDate = new Date(self.startTimeValue)
          // 计算上一周的开始时间
          if (switchType === 0) {

            currentWeekDate.setDate(currentWeekDate.getDate() - 7)
          } else {
            currentWeekDate.setDate(currentWeekDate.getDate() + 7)
          }
          var week = currentWeekDate.getDay()
          var diff = week ? week - 1 : 6
          currentWeekDate.setDate(currentWeekDate.getDate() - diff)
          self.startTimeValue = date.formatTime(currentWeekDate, '/')
          currentWeekDate.setDate(currentWeekDate.getDate() + 6)
          self.endTimeValue = date.formatTime(currentWeekDate, '/')

          break
        case 'month': //按月
          // console.log(self.startTimeValue)
          var currentMonthDate = new Date(self.startTimeValue)
          if (switchType === 0) {

            currentMonthDate.setMonth(currentMonthDate.getMonth() - 1)
          } else {
            currentMonthDate.setMonth(currentMonthDate.getMonth() + 1)
          }
          // 计算上个月开始时间：1号
          self.startTimeValue =
            date.formatYearMonth(currentMonthDate, '/') + '-' + '01'
          var endDate = new Date(
            currentMonthDate.getFullYear(),
            currentMonthDate.getMonth() + 1,
            0
          )
          self.endTimeValue = date.formatDate(endDate, '/')

          break
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
>>> {
  .control-strategy-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    overflow: auto;

    .head-section {
      display:flex
      align-items: center
      .table-head {
        /* margin-top 0.2rem */
        height: 0.43rem;
        line-height: 0.43rem;
        font-size: 0.16rem;
        font-weight: normal;
        float: left;
      }

      header {
        float: right;
      }
    }

    .table-section {
      position: absolute;
      top: 0.72rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 0.2rem;
      box-sizing: border-box;
      background: #202c5f;
      overflow: auto;

      .content-button {
        text-align: right;
      }

      .area-table-section {
        position: absolute;
        top: 0.66rem;
        left: 0.2rem;
        right: 0.2rem;
        bottom: 0.2rem;

        .el-select--mini {
          width: 60px;

          .el-input--suffix .el-input__inner {
            padding-right: 20px;
            padding-left: 10px;
          }
        }

        .air-table-item {
          margin-right: 0.1rem;
        }

        .tem-input {
          width: 40px;
          height: 28px;

          .el-input__inner {
            height: 100%;
            padding: 0;
            text-align: center;
          }
        }
      }

      .el-dialog__body {
        padding: 10px 20px 0;
      }
    }
  }

  .manage-page-aside .el-table__body tr {
    cursor: pointer;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
    color: #fff;
    background-color: rgba(68, 199, 244, 0.2) !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto !important;
  }

  .el-table .el-checkbox__label, .el-table .el-radio__label, .el-checkbox {
    color: #fff;
  }

  .el-button.is-round {
    padding: 3px 6px;
  }

  .temperature-txt {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #fff;
  }

  .time-select-box {
    // opacity: 0.5;
    pointer-events: none;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 90%;
  }

  >>> .same-dia {
    .el-form .el-form-item:last-child {
      margin-bottom: 0;
    }

    .el-dialog__footer {
      padding: 0 0.3rem 0.3rem;
    }
  }

  .section-head {
    position: relative;
    margin-bottom: 0.1rem;

    .head-title {
      position: absolute;
      bottom: 0;
      display: inline-block;
      float: left;
      font-size: 0.16rem;
      font-weight: normal;
    }

    .buttons {
      display: inline-block;
      float: right;
    }
  }

  /* 空调状态 */
  .aic-conditioner-section {
    .air-table-item {
      display: inline-block;
      width: 1.8rem;
      margin: 0.1rem 0;
      margin-right: 0.02rem;

      .el-select {
        padding: 0;
        width: 50%;
      }
    }
  }
}
>>>.el-table tr.warning-row{
   background-color: rgba(220,51,51,0.46);
}
>>>.el-table--striped .el-table__body tr.el-table__row--striped.warning-row td{
    background-color: #e60000;
}
>>>.shuttle-row .el-transfer-panel {
    background: none;
}

>>>.shuttle-row .el-transfer-panel__item.el-checkbox {
    color: #fff;
}
>>>.shuttle-row .el-transfer__button {
    display: block;
    margin: 0;
    width: 90px;
    margin-top: 10px;
}

          .head
            position relative
            width 11rem
            height 0.45rem
            float left
            line-height 0.43rem
            box-sizing border-box
            // 选择按天按周按月
            .select-data-range
                width 0.8rem
                float left
                margin-left 0.2rem
                text-align center
                .el-input--small .el-input__inner
                    width 0.8rem !important
            .select-chart-range
                margin-left: 0.1rem;
                width:1rem;
                .el-input--small .el-input__inner
                    width:1rem !important
            .time-input-box
                position relative
                float left
                margin-left 0.1rem
                .el-date-editor
                    height 0.35rem
                    width 1.6rem !important
                .el-input--small .el-input__inner
                    width 1.6rem !important
                .el-input--suffix .el-input__inner
                    padding-right 0
            // 上一个下一个
            .pre-button, .next-button
                width 0.2rem
                float left
            .pre-button
                margin-left 0.1rem
            .next-button
                margin-left 0.1rem
            .pre-button img, .next-button img
                height 0.24rem
                width 0.2rem
                vertical-align middle
                cursor pointer
            // 时间控件
            .time-select-box
                position relative
                float left
                margin-left 0.1rem
                .el-date-editor
                    height 0.35rem
                    width 1.6rem !important
                .el-input--small .el-input__inner
                    width 1.6rem !important
                .el-input--suffix .el-input__inner
                    padding-right 0
            // 查询按钮
            .search-btn-box
                float left
                margin-left 0.1rem
                vertical-align middle
                .el-button
                    padding 0 !important
                .el-button--medium
                    width 0.9rem
                    height 0.35rem !important
                    border-radius 0.05rem !important
                    background-color rgba(208, 210, 211, 0.2)
                    font-size 0.16rem !important
                    color #fff !important
                    border solid 0.02rem #44c7f4
                .search-icon
                    width 0.16rem
                    height 0.16rem
                    vertical-align middle
                .search-txt
                    font-size 0.16rem
                    margin-left 0.05rem
                    vertical-align middle

.SetTime-boxmian .el-checkbox {
    color: #fff;
    margin-right: 10px;
    min-width: 60px;
}
.SetTime-boxmian {
    margin-bottom: 20px;
    margin-top: 10px;
    border-bottom: 1px dashed #a5a5a5;
    padding-bottom: 20px;
}
.SetTime-boxmian:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.SetTimeSubmitBtn{
    text-align: center;
}

.SetTime-box {
  margin-top: 0.2rem;
  display: flex;

  align-items center {
    -webkit-box-align: center;
  }

  -webkit-align-items: center;
  -ms-flex-align: center;

  span {
    padding: 0 0.1rem;
    color: #fff;
  }
}
</style>
